<template>
  <div>
     <h1>当前求和:{{ sum }}</h1>
    <button @click="sum++">+1</button>
    <h3>姓名:{{person.name}}</h3>
    <h3>年龄:{{person.age}}</h3>
    <h3>薪资:{{person.job.j1.salary}}k</h3>
    <button @click="person.age++">年龄+1</button>
    <button @click="person.job.j1.salary++">薪资+1</button>
    <hr>

    <button @click="addCar">添加车辆</button>
    <button v-show="person.car" @click="person.car.name+='@'">车辆名字改变</button>
    <button v-show="person.car" @click="person.car.price++">车辆升值</button>
    
    <h3>{{person.car}}</h3>
  </div>
</template>

<script setup>
import { ref,reactive,toRaw,markRaw } from 'vue'
let sum = ref(0)
let person = reactive({
    name:'特朗普',
    age:30,
    job:{
        j1:{
            salary:20
        }
    }
})
console.log(person)
// person = toRaw(person)
// console.log(person)
function addCar(){
    //不加markRaw自动响应式,如何定义普通的呢
    //数值还是变的
    person.car=markRaw({name:"奔驰",price:30})
}

</script>